<template>
  <view class="padding-sm">
    <view class="app-body" v-if="subVisitInfo">
      <!-- 基础信息 -->
      <view class="sub-visit-info">
        <uni-section class="mb-10" title="复诊提醒信息" :sub-title="subVisitInfo.createTime ? subVisitInfo.createTime : ''" >
          <template v-slot:decoration>
            <view class="decoration"></view>
          </template>
          <view class="content-list padding-sm">
            <view class="content-item">
              <view class="title">复诊日期：</view>
              <view class="content">{{ subVisitInfo.subVisitDate }}</view>
            </view>
          </view>
          <view class="content-list padding-sm">
            <view class="content-item">
              <view class="title">复诊地址：</view>
              <view class="content">{{ subVisitInfo.subVisitAddress }}</view>
            </view>
          </view>
          <view class="content-list padding-sm">
            <view class="content-item">
              <view class="title">医生电话：</view>
              <view class="content">{{ subVisitInfo.doctorPhone }}</view>
            </view>
          </view>
          <view class="content-list padding-sm">
            <view class="content-item">
              <view class="title">复诊提醒内容：</view>
              <view class="content">{{ subVisitInfo.subVisitContent }}</view>
            </view>
          </view>
          <view class="content-list padding-sm">
            <view class="content-item">
              <view class="title">上一次执行时间：</view>
              <view class="content">{{ subVisitInfo.latestTime }}</view>
            </view>
          </view>
          <view class="content-list padding-sm">
            <view class="content-item">
              <view class="title">创建时间：</view>
              <view class="content">{{ subVisitInfo.createTime }}</view>
            </view>
          </view>
          <view class="content-list padding-sm">
            <view class="content-item">
              <view class="title">提醒次数：</view>
              <view class="content">{{ subVisitInfo.executeCount }}次</view>
            </view>
          </view>
        </uni-section>
      </view>
    </view>
    <!-- 查无数据 -->
    <view v-else>
      <empty-page container-height="100px" text="暂无诊断信息" />
    </view>

    <view style="height: 20px;" />
  </view>
</template>

<script>
  export default {
    data() {
      return {
        id: undefined,
        subVisitInfo: {}
      }
    },
    onLoad(option) {
      this.id = option.id;
      this.fetchData();
    },
    methods: {
      async fetchData() {
        const id = this.id;
        const {
          data: res
        } = await uni.$http.get(`/subVisit/${id}`);
        if (res.code !== 200) return uni.$showMsg()
        this.subVisitInfo = res.data;
      }
    }
  }
</script>

<style lang="scss">
  .content-list {
    position: relative;
    display: flex;
    align-items: center;

    .content-item {
      display: flex;
      align-items: center;
      overflow-x: auto;
      margin-right: 5px;

      .title {
        flex-shrink: 0;
        font-size: 14px;
      }

      .content {
        white-space: nowrap;
        font-size: 14px;
        color: gray;
      }
    }
  }

  .decoration {
    width: 6px;
    height: 6px;
    margin-right: 4px;
    border-radius: 50%;
    background-color: #1cbbb4;
  }

  .sub-visit-info {
    border-radius: 5px;
    padding: 5px;
    height: 350px;
    background-color: white;
  }
</style>